<style>
    .about-password{
        height: 15px;
    }
    .line{
        height: 1px;
        background-color: #EEEEEE;
        box-sizing: border-box;
        width: 70%;
        display: inline-block;
    }
    .three-login-box{
        margin-top: 30px;
        position: relative;
        text-align: center;
    }

    .three-login{
        width: 100px;
        height: 15px;
        background-color: #FFFFFF;
        position: absolute;
        left: 50%;
        top:0;
        margin-left: -50px;
        margin-top: 8px;
        line-height: 15px;
        text-align: center;
        font-size:13px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color: #858585;
        z-index: 1;
    }
    .vv-txt-center{
        position: relative;
        top: 0;
        left: 0;
    }
    .mui-grid-view.mui-grid-9{
        background-color: #FFFFFF;
        border: 0;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border: 0;
    }

    .mui-icon-weixin{
        color: #07BE14;
    }
    .mui-icon-qq{
        color: #36AAE8;
    }
</style>
<!-- 头部标题 -->
<header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">登录</h1>
</header>
<!-- 主体 -->
<div class="vv-mg">
    <div class="mui-slider">
        <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <a class="mui-control-item" href="#item1">密码登录</a>
            <a class="mui-control-item mui-active" href="#item2">验证码登录</a>
        </div>
        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
        <div class="mui-slider-group vv-m-t-120">
            <!-- 密码登录 -->
            <div id="item1" class="mui-slider-item mui-control-content">
                <form class="mui-input-group">
                    <div class="mui-input-row">
                        <label>手机号</label>
                        <input type="number" class="mui-input-clear" type="number" name="mobile" placeholder="请输入您的手机号">
                    </div>
                    <div class="mui-input-row">
                        <label>登录密码</label>
                        <input type="password" class="mui-input-password" name="password" placeholder="请输入密码">
                    </div>
                </form>
                <button class="public-g-btn btn-block">登&nbsp;录</button>
            </div>
            <!-- 验证码登录 -->
            <div id="item2" class="mui-slider-item mui-control-content mui-active">
                <form class="mui-input-group" action="javascript:;">
                    <div class="mui-input-row">
                        <label>手机号</label>
                        <input type="number" class="mui-input-clear" name="phone" placeholder="请输入您的手机号">
                    </div>
                    <div class="mui-input-row">
                        <label>验证码</label>
                        <input type="text" class="mui-input" name="captcha" placeholder="请输入验证码">
                        <button class="yzm-btn">获取验证码</button>
                    </div>
                </form>
                <button class="public-g-btn btn-block">登&nbsp;录</button>
            </div>
        </div>
    </div>
    <div class="about-password" style="width:90%;margin:0 auto;">
        <button id="zhuce" class="mui-btn-link mui-pull-left"style="padding: 0px;">快速注册</button>
        <button id="forget" class="mui-btn-link mui-pull-right"style="padding: 0px;">忘记密码</button>
    </div>
    <div class="three-login-box">
        <div class="line">

        </div>
        <div class="three-login">
            第三方登录
        </div>
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
                <a href="#" id="loginByQQ">
                    <span class="mui-icon mui-icon-qq"></span>
                </a>
            </li>
            <li class="mui-table-view-cell mui-media mui-col-xs-6 mui-col-sm-6">
                <a href="#" id="loginByWX">
                    <span class="mui-icon mui-icon-weixin"></span>
                </a>
            </li>
        </ul>
    </div>

</div>
<script src="/assets/js/frontend/user/login.js"></script>
